<script setup lang="ts">
import { ref } from "vue";
// import { apiCreateRecord, apiCreateMethod } from "../../apis/apis.js";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {apiWriteRecord,apiWriteMethod,apiWriteUserRecord,apiWriteBlock} from "../../apis/apis.js";
import { useAppStore } from "../../stores/appStore.js";
const appStore = useAppStore();
const uid = ref(appStore.uid);

// 表单数据
const formData = ref({
  // Record 字段
  block: "",
  batch: "1",
  area: "",
  crop: "",
  newRecordDate: new Date().toISOString().split('T')[0], // 默认今天
  
  // Method 字段
  methodTitle: "",
  methodTime: new Date().toISOString().slice(0, 16), // 带时间的日期
  methodDetail: "",
  methodWeather: "晴",
  methodTemperature: "",
  methodExtra: "",
  methodOperator: "",
  methodImages: [] as string[],
  methodPhase: "",
});


// 图片上传
const uploadImage = () => {
  uni.chooseImage({
    count: 9,
    success: async (res) => {
      uni.showLoading({ title: '上传中...' });
      for (const filePath of res.tempFilePaths) {
        const uploadRes = await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: 'https://api.combinecalculate.cn/api/upload/image', // 服务器上传接口
            filePath,
            name: 'file',
            success: (res) => {
              console.log('上传成功，返回的数据：', res.data); // 输出返回的原始数据，看看内容是什么
              try {
                const data = JSON.parse(res.data); // 尝试解析 JSON
                resolve(data as { url: string });
              } catch (error) {
                reject('无法解析 JSON 响应');
              }
            },
            fail: reject
          });
        });

        // 将返回的 URL 添加到现有的 methodImages 数组中，而不是重置它
        const newUrl = (uploadRes as { url: string }).url;
        formData.value.methodImages.push(newUrl);
        console.log("当前的图片数组:", formData.value.methodImages); // 输出当前的图片数组
      }

      uni.showToast({ title: '上传成功', icon: 'success' });
      uni.hideLoading();
    }
  });
};

// 提交表单
const submitForm = async () => {
  if(!validateForm()) return;
  try {
    uni.showLoading({ title: '提交中...' });
    console.log("提交的数据:",  
      {
        block: formData.value.block,
        batch: formData.value.batch,
        area: formData.value.area, 
        crop: formData.value.crop,
        newRecordDate: formData.value.newRecordDate,
        state: true,
        methodTitle: formData.value.methodTitle,
        methodTime: formData.value.methodTime,
        methodDetail: formData.value.methodDetail,
        methodWeather: formData.value.methodWeather,
        methodExtra: formData.value.methodExtra,
        methodTemperature: formData.value.methodTemperature,
        methodOperator: formData.value.methodOperator,
        methodImages: formData.value.methodImages,
        methodPhase: formData.value.methodPhase
      }
     );
    
    // 1. 创建 Record
    const recordRes = await apiWriteRecord({
      block: formData.value.block,
      batch: formData.value.batch,
      area: formData.value.area,
      crop: formData.value.crop,
      newRecordDate: formData.value.newRecordDate,
      state: true
    });

    
    if (recordRes.status) {
      uni.showToast({ title: '创建记录成功' });
    }else{
      console.log("创建记录失败:", recordRes);
      
      uni.showToast({ title: '创建记录失败', icon: 'none' });
      return;
    }
 
    
    const recordId = recordRes.data.id;
   //创建Record对用户的关联
    const recordUserRes = await apiWriteUserRecord({
      rid: recordId, // 新创建的记录ID
      state: true // 状态可以根据需要设置
    },uid.value);
    if (recordUserRes.status) {
      uni.showToast({ title: '创建用户记录成功' });
    }else{
      uni.showToast({ title: '创建用户记录失败', icon: 'none' });
      return; 
    }
    //创建Record对Block的关联
    const blockRes = await apiWriteBlock({
      block: formData.value.block, // 假设用户ID为1，需要根据实际情况获取
      state: true // 状态可以根据需要设置
    },uid.value);
    if(blockRes.status){
      uni.showToast({ title: '创建区块成功' }); 
    }
    else{
      uni.showToast({ title: '创建区块失败', icon: 'none' });
      return; 
    }

    // 2. 创建关联的 Method
    const methodRes = await apiWriteMethod({
      title: formData.value.methodTitle,
      time: formData.value.methodTime,
      detail: formData.value.methodDetail,
      weather: formData.value.methodWeather,
      extra: formData.value.methodExtra,
      phase: formData.value.methodPhase,
      temperature: formData.value.methodTemperature,
      operator: formData.value.methodOperator,
      images: formData.value.methodImages,
      rid: recordId, // 关联到新创建的 record
      state: true
    });
    if(methodRes.status){
      uni.showToast({ title: '创建成功' });
      setTimeout(() => {
        uni.hideLoading();
        uni.navigateBack(); // 返回上一页
      }, 1500);
    }else{
      uni.showToast({ title: '创建方法失败', icon: 'none' }); 
    }
  } catch (error) {
    console.error('提交失败:', error);
    uni.showToast({ title: '提交失败', icon: 'none' });
  }
};

// 验证表单
const validateForm = () => {
  if (!formData.value.block) {
    uni.showToast({ title: '请按照所定标准填写区块', icon: 'none' });
    return false;
  }
  if (!formData.value.methodTitle) {
    uni.showToast({ title: '请填写操作标题', icon: 'none' });
    return false;
  }
  return true;
};

// 提交处理
const handleSubmit = () => {
  if (validateForm()) {
    uni.showLoading({ title: '提交中...' });
    submitForm();
  }
};
</script>

<template>
  <view class="form-container">
    <uni-forms>
      <!-- Record 信息 -->
      <uni-section title="基础信息" type="line">
        <uni-forms-item label="区块" required>
          <uni-easyinput v-model="formData.block" placeholder="请输入区块" />
        </uni-forms-item>
        
        <uni-forms-item label="批次">
          <uni-easyinput v-model="formData.batch" placeholder="请输入批次" />
        </uni-forms-item>
        
        <uni-forms-item label="面积" required>
          <uni-easyinput 
            v-model="formData.area" 
            placeholder="请输入面积" 
            type="number" 
          />
          <text class="unit">亩</text>
        </uni-forms-item>
        
        <uni-forms-item label="作物" required>
          <uni-easyinput v-model="formData.crop" placeholder="请输入作物" />
        </uni-forms-item>
        
        <uni-forms-item label="记录日期">
          <uni-datetime-picker 
            v-model="formData.newRecordDate" 
            type="date" 
          />
        </uni-forms-item>
      </uni-section>
      
      <!-- Method 信息 -->
      <uni-section title="操作记录" type="line">
        <uni-forms-item label="标题" required>
          <uni-easyinput 
            v-model="formData.methodTitle" 
            placeholder="如: 播种、施肥等" 
          />
        </uni-forms-item>
        
        <uni-forms-item label="操作时间">
          <uni-datetime-picker 
            v-model="formData.methodTime" 
            type="datetime" 
          />
        </uni-forms-item>
        
        <uni-forms-item label="天气">
          <uni-data-select
            v-model="formData.methodWeather"
            :localdata="[
              { value: '晴', text: '晴' },
              { value: '多云', text: '多云' },
              { value: '阴', text: '阴' },
              { value: '雨', text: '雨' },
              { value: '雪', text: '雪' }
            ]"
          />
        </uni-forms-item>
        
        <uni-forms-item label="温度(℃)">
          <uni-easyinput 
            v-model="formData.methodTemperature" 
            placeholder="请输入温度" 
            type="number" 
          />
        </uni-forms-item>
        
        <uni-forms-item label= "阶段">
          <uni-forms-item>
            <uni-easyinput 
            v-model="formData.methodPhase" 
            placeholder="请输入阶段" 
            type="string" 
          />
        </uni-forms-item>
   
        </uni-forms-item>
        
        <uni-forms-item label="内容" required>
          <uni-easyinput 
            v-model="formData.methodDetail" 
            placeholder="详细描述操作内容" 
            type="textarea" 
          />
        </uni-forms-item>
        <uni-forms-item label="额外" >
          <uni-easyinput 
            v-model="formData.methodExtra" 
            placeholder="额外信息" 
            type="textarea" 
          />
        </uni-forms-item>
        
        <uni-forms-item label="记录员">
          <uni-easyinput 
            v-model="formData.methodOperator" 
            placeholder="请输入记录员姓名" 
          />
        </uni-forms-item>
        
        <uni-forms-item label="现场照片">
          <view class="image-uploader">
            <view 
              v-for="(img, index) in formData.methodImages" 
              :key="index" 
              class="image-preview"
            >
              <image :src="img" mode="aspectFill" />
              <uni-icons 
                type="close" 
                @click="formData.methodImages.splice(index, 1)" 
              />
            </view>
            <view 
              v-if="formData.methodImages.length < 9" 
              class="upload-btn" 
              @click="uploadImage"
            >
              <uni-icons type="plusempty" size="24" />
              <text>添加照片</text>
            </view>
          </view>
        </uni-forms-item>
      </uni-section>
      
      <view class="form-actions">
        <button type="primary" @click="handleSubmit">提交记录</button>
      </view>
    </uni-forms>
  </view>
</template>

<style scoped lang="scss">
.form-container {
  padding: 30rpx;
  
  .unit {
    margin-left: 10rpx;
    color: #999;
    font-size: 28rpx;
  }
  
  .image-uploader {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .image-preview {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .uni-icons {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 6rpx;
        border-radius: 0 0 0 8rpx;
      }
    }
    
    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px dashed #ddd;
      border-radius: 8rpx;
      color: #999;
      
      text {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
  
  .form-actions {
    margin-top: 40rpx;
    
    button {
      width: 100%;
    }
  }
}
</style>